// vue3 的响应式
// 是由 es6的proxy代理实现的 set记性拦截数据
//  get 进行赋值数据
function reactive(target={}){
   if(typeof target!=='object'||target==null){
     return target
   }
  //  vue3 的proxy代理
   const observed=new Proxy(target,{
     get(target,key){
      //  
      //  只处理本身属性 不处理原型属性
      const ownKeys=Reflect.ownKeys(target);
      if(ownKeys.includes(key)){
        console.log("get","监听")
      }
      let result =Reflect.get(target,key);
      //  proxy 的代理  只有在数据被使用 或赋值的时候 
      // 才会触发get 从而递归监听
      // 而vue2的defineProperty 数据首次就要深度递归监听
       return reactive(result)// 获取到属性后 递归监听

     },
     set(target,key,val){
        // target目标 对象  key 属性 val 新的值
        if(val==target[key]){ //当新的值等于原来的不处理
          return true
        }
        const onwKeys=Reflect.ownKeys(target);
        if(onwKeys.includes(key)){
          console.log("已有属性",key)
          console.log("触发视图更新")
        }else{
          console.log('新增属性',key)
        }
        let result=Reflect.get(target,key,val);
        return result
     },
     defineProperty(taregt,key){
       const result=Reflect.deleteProperty(target,key)
       return result;
     }
   })
   return observed
}

let proxyData=reactive({
  name:"zhangsan",
  age:20,
  room:{
    cc:{
      dd:111
    }
  },
  info:{
    city:"beijing",
    a:{
      b:{
        c:{
          d:"111"
        }
      }
    }
  }
})
// proxyData.name="李四"
proxyData.info.a.b.c.d=222;
